<template>
  <div class="took-publish">
    <head-top head-title="立即发布" go-back="true"></head-top>
    <div class="took-box">
      <div class="classfiy">
        <div class="line">
          认证类型选择：
        </div>
        <div class="chose-btn" @click="choseType">
          <p>{{typeText}}</p>
        </div>
      </div>
      <div class="fill_in">
        <ul>
          <li>
            <span>标题名称：</span>
            <input type="text" placeholder="请输入发布标题" v-model.trim="title">
          </li>
          <li>
            <span>订单酬金：<span style="color: red">￥</span></span>
            <input type="tel" placeholder="请输入金额" v-model.trim="money">
          </li>
        </ul>
      </div>
      <div class="issue_text">
        <div class="issue_title">
          <span>技能描述</span>
        </div>
        <textarea @keyup="writeContent" @input="writeContent" name="" id="" placeholder="请对您的技能进行描述..." cols="30"
                  rows="10" v-model="issueText"
                  maxlength="800"></textarea>
        <div class="count">
          {{currentCount}}/{{totalCount-currentCount}}
        </div>
      </div>
      <!--求职专区发布-->
      <div class="order-btn" v-if="pageName ==='JobWant'">
        <button @click="jobBtn()">
          <span>确认提交</span>
        </button>
      </div>
      <!--招聘专区发布-->
      <div class="order-btn" v-if="pageName ==='Recruit'">
        <button @click="recBtn()">
          <span>确认提交</span>
        </button>
      </div>
      <!--技能人才发布-->
      <div class="order-btn" v-if="pageName ==='SkilledTalent'">
        <button @click="skillBtn()">
          <span>确认提交</span>
        </button>
      </div>
    </div>
    <!--类型选择弹窗-->
    <mt-popup
      v-model="popupVisible"
      :closeOnClickModal="closePopup"
      popup-transition="popup-fade" lockScroll="true" class="popup-box">
      <div class="box-main">
        <div class="box-top">
          <div class="close" @click="popupClose">×</div>
          <span>类型</span>
        </div>
        <div class="type-ul" v-for="(sort,sortindex) in sortArray">
          <div class="ul-title">
            <span>▎</span>{{sort.name}}
          </div>
          <ul class="items clearfix">
            <li class="item-li" v-for="(item,index) in sort.child" :key="index"
                :class="(activeClass[0]===sortindex && activeClass[1]===index) ? 'active' : ''"
                @click="selectsort(item,sortindex,index)">
              <span>{{item.c_name}}</span>
            </li>
          </ul>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import headTop from '../../components/header/Header'
  import { getSort2, goJobPublish, goRecruit, goSkill } from '../../api/supervise'
  import { Toast, Indicator } from 'mint-ui'

  export default {
    name: 'TookPublish',
    data () {
      return {
        pageName: '', // 页面名称
        popupVisible: false, // 类型弹窗
        closePopup: false, // 禁止点击弹窗遮罩层关闭
        sortArray: [], // 接单类型分类
        activeClass: [-1, -1], // 选择类型的样式
        typeId: '', // 存放选择的类型
        typeText: '点击选择类型', // 存放选择的类型的名称
        title: '', // 标题
        money: '', // 金额
        totalCount: 800,
        currentCount: 0,
        issueText: '' // 描述内容
      }
    },
    created () {
      // JobWant：求职专区  Recruit：招聘专区  SkilledTalent：技能人才
      this.pageName = this.$route.params.page
      // console.log(this.pageName)
      this._getSort2()
    },
    methods: {
      // 点击选择类型(弹窗)
      choseType () {
        this.popupVisible = true
      },
      // 选择类型弹窗的关闭
      popupClose () {
        this.popupVisible = false
      },
      // 类型的请求数据
      _getSort2 () {
        getSort2().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.sortArray = res.data
            // console.log(this.sortArray)
          }
        })
      },
      // 每个类型的点击样式及事件
      selectsort (item, sIndex, index) {
        // console.log(item)
        this.typeId = item.c_type_id
        this.typeText = item.c_name
        this.activeClass = [sIndex, index]
        this.popupVisible = false
      },
      // 判断输入的字数
      writeContent () {
        this.currentCount = this.issueText.length
        let remainCounet = this.totalCount - this.currentCount
        if (!remainCounet) {
          Toast({
            message: '字数不能超过800',
            position: 'middle',
            duration: 1000
          })
        }
      },
      // 求职专区发布提交
      jobBtn () {
        setTimeout(function () {
          Indicator.close()
        }, 3000)
        // 判断有无选择类型
        if (!this.typeId) {
          Toast({
            message: '请选择查验类型',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.title) {
          Toast({
            message: '请输入发布标题',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.money) {
          Toast({
            message: '订单酬金',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.issueText) {
          Toast({
            message: '请输入技能描述',
            position: 'middle',
            duration: 2000
          })
          return
        }
        Indicator.open({
          text: '发布中...',
          spinnerType: 'fading-circle'
        })
        goJobPublish(this.title, this.issueText, this.typeId, this.typeText, this.money).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Toast({
              message: res.data,
              position: 'middle',
              duration: 3000
            })
            this.threeGo()
          }
          if (res.code === 4001) {
            Indicator.close()
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            // window.location.href = '/my/OrderTake'
            // 延迟2秒跳转到相对应的认证界面
            this.threeGo2()
            return
          }
        })
      },
      // 招聘专区发布提交
      recBtn () {
        setTimeout(function () {
          Indicator.close()
        }, 3000)
        // 判断有无选择类型
        if (!this.typeId) {
          Toast({
            message: '请选择查验类型',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.title) {
          Toast({
            message: '请输入发布标题',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.money) {
          Toast({
            message: '订单酬金',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.issueText) {
          Toast({
            message: '请输入技能描述',
            position: 'middle',
            duration: 2000
          })
          return
        }
        Indicator.open({
          text: '发布中...',
          spinnerType: 'fading-circle'
        })
        goRecruit(this.title, this.issueText, this.typeId, this.typeText, this.money).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Toast({
              message: res.data,
              position: 'middle',
              duration: 3000
            })
            this.threeGo()
          }
          if (res.code === 4001) {
            Indicator.close()
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            // window.location.href = '/my/Receipt'
            // 延迟2秒跳转到相对应的认证界面
            this.threeGo2()
            return
          }
        })
      },
      // 技能人才发布提交
      skillBtn () {
        setTimeout(function () {
          Indicator.close()
        }, 3000)
        // 判断有无选择类型
        if (!this.typeId) {
          Toast({
            message: '请选择查验类型',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.title) {
          Toast({
            message: '请输入发布标题',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.money) {
          Toast({
            message: '订单酬金',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.issueText) {
          Toast({
            message: '请输入技能描述',
            position: 'middle',
            duration: 2000
          })
          return
        }
        Indicator.open({
          text: '发布中...',
          spinnerType: 'fading-circle'
        })
        goSkill(this.title, this.issueText, this.typeId, this.typeText, this.money).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Toast({
              message: res.data,
              position: 'middle',
              duration: 3000
            })
            this.threeGo()
          }
          if (res.code === 4001) {
            Indicator.close()
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            // window.location.href = '/my/OrderTake'
            // 延迟2秒跳转到相对应的认证界面
            this.threeGo2()
            return
          }
        })
      },
      // 二秒后跳转页面
      threeGo () {
        const TIME_COUNT = 2
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer)
              this.timer = null
              // 跳转的页面写在此处\
              // 页面是求职专区就跳转回求职专区列表
              if (this.pageName === 'JobWant') {
                history.replaceState({}, '', '/Home')
                this.$router.push('/JobWant')
              }
              // 页面是招聘专区就跳转回招聘专区列表
              if (this.pageName === 'Recruit') {
                history.replaceState({}, '', '/Home')
                this.$router.push('/Recruit')
              }
              // 页面是技能人才就跳转回技能人才列表
              if (this.pageName === 'SkilledTalent') {
                history.replaceState({}, '', '/Home')
                this.$router.push('/SkilledTalent')
              }
            }
          }, 1000)
        }
      },
      // 延迟跳转到认证
      threeGo2 () {
        const TIME_COUNT = 2
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer)
              this.timer = null
              // 跳转的页面写在此处\
              // 页面是求职专区就跳转回求职专区列表
              if (this.pageName === 'JobWant') {
                window.location.href = '/my/OrderTake' // 接单人员认证界面
              }
              // 页面是招聘专区就跳转回招聘专区列表
              if (this.pageName === 'Recruit') {
                window.location.href = '/my/Receipt' // 发单人员认证界面
              }
              // 页面是技能人才就跳转回技能人才列表
              if (this.pageName === 'SkilledTalent') {
                window.location.href = '/my/OrderTake' // 接单人员认证界面
              }
            }
          }, 1000)
        }
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .took-publish {
    padding-top: 40px;
    .took-box {
      .classfiy {
        padding: 0 10px;
        border-bottom: 10px solid #f2f2f2;
        .line {
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          border-bottom: 1px solid #d9d9d9;
        }
        .chose-btn {
          width: 200px;
          height: 40px;
          p {
            font-size: 15px;
            color: #2585d0;
            line-height: 40px;
          }
        }
      }
      .fill_in {
        border-bottom: 10px solid #f2f2f2;
        ul {
          padding: 0 10px;
          li {
            font-size: 1.3rem;
            height: 48px;
            line-height: 48px;
            border-bottom: 1px solid #d9d9d9;
            input {
              width: 42%;
              border: none;
              outline: none;
              font-size: 1.2rem;
              color: #888888;
            }
          }
          li:last-child {
            border-bottom: none;
          }
        }
      }
      .issue_text {
        padding: 10px;
        position: relative;
        .issue_title {
          padding: 10px 0;
          span {
            font-size: 15px;
            color: #292929;
          }
        }
        textarea {
          margin-top: 5px;
          box-sizing: border-box;
          width: 100%;
          padding: 10px;
          height: 150px;
          background: #f2f2f2;
          border-radius: 7px;
          resize: none;
          outline: none;
          border: none;
          font-size: 12px;
          line-height: 16px;
        }
        .count {
          position: absolute;
          bottom: 20px;
          right: 20px;
          color: #0078de;
        }
      }
      .order-btn {
        width: 100%;
        text-align: center;
        padding-bottom: 20px;
        button {
          width: 90%;
          height: 44px;
          background: #0078de;
          outline: none;
          border: none;
          border-radius: 5px;
          margin-top: 20px;
          span {
            font-size: 15px;
            color: #fff;
          }
        }
      }
    }
    .popup-box {
      width: 100%;
      height: 90%;
      overflow: scroll;
      .box-main {
        .box-top {
          display: -webkit-box;
          display: -moz-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          align-items: center;
          height: 40px;
          background: #2585d0;
          .close {
            font-size: 30px;
            height: 40px;
            width: 45%;
            line-height: 40px;
            margin-left: 10px;
            color: #ffffff;
          }
          span {
            font-size: 15px;
            color: #ffffff;
          }
        }
        .type-ul {
          border-bottom: 5px solid #f2f2f2;
          padding-bottom: 5px;
          .ul-title {
            padding: 20px 0;
            font-size: 15px;
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            span {
              font-size: 20px;
              color: #2585d0;
            }
          }
          .items {
            .item-li {
              width: 86.25px;
              height: 32px;
              float: left;
              -moz-box-sizing: border-box;
              -webkit-box-sizing: border-box;
              border: 1px solid #d9d9d9;
              margin-left: 6px;
              text-align: center;
              margin-top: 5px;
              border-radius: 5px;
              span {
                font-size: 14px;
                line-height: 32px;
                color: #292929;
              }
            }
            .active {
              border: 1px solid #0078de;
              span {
                color: #0078de;
              }
            }
          }
        }
      }
    }
  }
</style>
